<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item index="home">首页</el-menu-item>
    <el-menu-item index="dashboard">仪表板</el-menu-item>
    <el-menu-item index="about">关于</el-menu-item>
    <el-submenu index="9">
      <template slot="title">更多</template>
      <el-menu-item index="9-1">设置</el-menu-item>
      <el-menu-item index="9-2">帮助中心</el-menu-item>
      <el-menu-item index="9-3">联系我们</el-menu-item>
    </el-submenu>
    <el-menu-item style="float: right;">
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar :size="32">{{ userAvatar }}</el-avatar>
          <span style="margin-left: 8px;">{{ userName }}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人资料</el-dropdown-item>
          <el-dropdown-item>账号设置</el-dropdown-item>
          <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'Navbar',
  props: {
    activeRoute: {
      type: String,
      default: 'home'
    }
  },
  data() {
    return {
      userName: '系统管理员',
      userAvatar: '管',
      // 模拟用户认证状态
      isAuthenticated: true
    }
  },
  computed: {
    activeIndex() {
      return this.activeRoute || 'home'
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log('选中的导航项:', key, keyPath)
      switch (key) {
        case 'home':
          this.$router.push('/')
          break
        case 'dashboard':
          this.$router.push('/dashboard')
          break
        case 'about':
          this.$router.push('/about')
          break
        case '9-1':
          this.$message('前往设置页面')
          break
        case '9-2':
          this.$message('前往帮助中心')
          break
        case '9-3':
          this.$message('前往联系我们页面')
          break
        default:
          break
      }
    },
    logout() {
      // 模拟登出操作
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 登出逻辑
        this.isAuthenticated = false
        this.$message.success('退出登录成功')
        this.$router.push('/')
      }).catch(() => {
        this.$message.info('已取消退出')
      })
    }
  }
}
</script>

<style scoped>
.el-menu-demo {
  border-bottom: none;
}

.el-menu {
  background-color: transparent;
}

.el-menu-item {
  line-height: 60px;
  height: 60px;
  padding: 0 20px;
}

.el-submenu {
  line-height: 60px;
  height: 60px;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style>